<template>
    <div>
        <div class="authche-box">
            <div class="item" v-for="(item,index) in menu_data" :key="index" @click="changeAuth(item.key)">
                <p class="flex-1">{{item.name}}</p>
            </div>
            <div class="item zdy-box flex flex-align-center item-active" @mouseenter="enter()" @mouseleave="leave()">
                <p class="flex-1">自定义</p>
                <img class="left-img" src="@/assets/img/filepanel/left-img.png" alt="" >
                <div class="right-box" :class="{leftboxtrue:leftbox}" v-if="showleft_index">
                    <div class="list flex flex-align-center" v-for="(item,i) in child_data" :key='i'>
                        <CheckBox :min='true' :is_show="item.status" v-on:change="onChange(item,i)"/>
                        <p>{{item.name}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import CheckBox from "../common/checkbox";
export default {
 components: {
    CheckBox
  },
    data () {
        return {
            showleft_index:'',
            arr:[],
        }
    },
     computed: {
        AuthUserList(){
            return this.$store.getters.getAuthUserList
        },
        memberlist(){
            return this.$store.getters.getMemberList
        }
    },
    props: {
        leftbox:{  // 自定义显示位置
            type:Boolean,
            default:false
        },
        menu_data:{  // 非自定义数据
            type:Array
        },
        child_data:{ // 自定义数据
            type:Array
        },
        child_item:{ // 自定义点击时需要
            type:Object
        },
        auth_type:{ // 判断是授权窗口调用还是右侧滑块调用
            type:String
        }
    },
    mounted () {

    },
    methods: {
        // 自定义选中
        onChange(item,i){
            var self = this;
            var root = self.child_item;
            self.child_data.forEach((item,e) => {
               if(i == e){
                   item.status = ! item.status;
                    // auth_type为'set_auth'时;
                    //为授权窗口，进行相关数据操作
                    if(this.auth_type == 'set_auth'){
                        if(item.status){
                            self.arr.push(item.key);
                            root.permissions = self.arr;
                            root.is_customize = true;
                                var obj = new Object;
                                obj.key = self.AuthUserList.indexOf(self.child_item);
                                obj.value = root;
                                self.$store.commit('setListPermissions',obj);
                        }else{
                            var index = self.arr.indexOf(item.key);
                            if (index > -1) {
                                        self.arr.splice(index, 1);
                                };
                                if(self.arr.length == 0){
                                    root.permissions = "1";
                                    root.is_customize = false;
                                }else{
                                    root.permissions = self.arr;
                                }
                                var obj = new Object;
                                obj.key = self.AuthUserList.indexOf(self.child_item);
                                obj.value = root;
                                self.$store.commit('setListPermissions',obj);
                        }
                    }else{ 
                        // 此处进行右侧滑块相关操作
                        if(item.status){
                            self.arr.push(item.key);
                            root.permission = self.arr;
                            root.is_customize = 1;
                                var obj = new Object;
                                obj.key = self.memberlist.indexOf(self.child_item);
                                obj.value = root;
                                self.$store.commit('updateMemberList',obj);
                        }else{
                            var index = self.arr.indexOf(item.key);
                            if (index > -1) {
                                        self.arr.splice(index, 1);
                                };
                                if(self.arr.length == 0){
                                    root.permission = "1";
                                    root.is_customize = 0;
                                }else{
                                    root.permission = self.arr;
                                }
                                var obj = new Object;
                                obj.key = self.memberlist.indexOf(self.child_item);
                                obj.value = root;
                                self.$store.commit('updateMemberList',obj);
                        }
                    }
               }
            });
        },

        // 非自定义选中
        changeAuth(key){
            // auth_type为'set_auth'时;
            //为授权窗口，进行相关数据操作
            if(this.auth_type == 'set_auth'){
                var root = this.child_item;
                root.permissions = key;
                root.is_customize = false;
                var obj = new Object;
                obj.key = this.AuthUserList.indexOf(this.child_item);
                obj.value = root;
                this.$store.commit('setListPermissions',obj);
            }else{
                // 此处进行右侧滑块相关操作
                var root = this.child_item;
                root.permission = key;
                root.is_customize = 0;
                var obj = new Object;
                obj.key = this.memberlist.indexOf(this.child_item);
                obj.value = root;
                this.$store.commit('updateMemberList',obj);
            }   
           
        },

        // 显示隐藏自定义
        enter(){
            this.showleft_index = 1;
        },
        leave(){
            this.showleft_index = '';
        },
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/filepanel/authchebox.less);
</style>


